import "package:flutter/material.dart";

List<String> messageList = [
  '消息1',
  '消息2',
  '消息3',
  '消息4',
  '消息5',
  '消息6',
];

// 网格布局 （动态生成同列表）
class UseGrid extends StatelessWidget {
  const UseGrid({super.key});

  @override
  Widget build(BuildContext context) {
    // return GridView.count(
    //   padding: const EdgeInsets.all(10), //内边距
    //   crossAxisCount: 4, //主轴数，一行的widget数量
    //   mainAxisSpacing: 10, //行间间隔
    //   crossAxisSpacing: 20, //列间间隔
    //   childAspectRatio: 0.7, //宽高比（默认1）
    //   children: [
    //     Container(
    //       alignment: Alignment.center,
    //       decoration: const BoxDecoration(
    //         color: Color.fromARGB(255, 255, 255, 170),
    //       ),
    //       child: const Icon(Icons.abc),
    //     ),
    //     Container(
    //       alignment: Alignment.center,
    //       decoration: const BoxDecoration(
    //         color: Color(0XFFBBFFAA),
    //       ),
    //       child: const Icon(Icons.abc),
    //     ),
    //     Container(
    //       alignment: Alignment.center,
    //       decoration: const BoxDecoration(
    //         color: Color.fromARGB(255, 255, 213, 170),
    //       ),
    //       child: const Icon(Icons.abc),
    //     ),
    //     Container(
    //       alignment: Alignment.center,
    //       decoration: const BoxDecoration(
    //         color: Color.fromARGB(255, 170, 255, 231),
    //       ),
    //       child: const Icon(Icons.abc),
    //     ),
    //     Container(
    //       alignment: Alignment.center,
    //       decoration: const BoxDecoration(
    //         color: Color.fromARGB(255, 170, 187, 255),
    //       ),
    //       child: const Icon(Icons.abc),
    //     ),
    //     Container(
    //       alignment: Alignment.center,
    //       decoration: const BoxDecoration(
    //         color: Color.fromARGB(255, 186, 170, 255),
    //       ),
    //       child: const Icon(Icons.abc),
    //     ),
    //     Container(
    //       alignment: Alignment.center,
    //       decoration: const BoxDecoration(
    //         color: Color.fromARGB(255, 231, 170, 255),
    //       ),
    //       child: const Icon(Icons.abc),
    //     ),
    //     Container(
    //       alignment: Alignment.center,
    //       decoration: const BoxDecoration(
    //         color: Color.fromARGB(255, 255, 170, 213),
    //       ),
    //       child: const Icon(Icons.abc),
    //     ),
    //     Container(
    //       alignment: Alignment.center,
    //       decoration: const BoxDecoration(
    //         color: Color.fromARGB(255, 255, 235, 170),
    //       ),
    //       child: const Icon(Icons.abc),
    //     ),
    //   ],
    // );

    // return GridView.extent(
    //   maxCrossAxisExtent: 80, //横轴子元素的最大长度
    //   children: const [
    //     Icon(Icons.abc),
    //     Icon(Icons.home),
    //     Icon(Icons.ac_unit),
    //     Icon(Icons.phone_android),
    //     Icon(Icons.abc),
    //     Icon(Icons.home),
    //     Icon(Icons.ac_unit),
    //     Icon(Icons.phone_android),
    //   ],
    // );

    return GridView.builder(
        padding: const EdgeInsets.all(10),
        // 网格配置 (SliverGridDelegateWithFixedCrossAxisExtent)
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, //每行数量
          // childAspectRatio: 0.7, //每个元素宽高比
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
        ),
        itemCount: messageList.length, //数量
        itemBuilder: (context, index) {
          return Container(
            decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(
                  color: const Color(0xffe4e5e9),
                  width: 1,
                )),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [const Icon(Icons.home), Text(messageList[index])],
            ),
          );
        });
  }
}
